<template>
  <div class="kpi_browse_container">
    <div class="first_container">
      <span class="rigth_10px">结束日期</span>
      <el-date-picker
        v-model="dataPickerSelectValue"
        type="date"
        placeholder="选择日期"
        format="yyyy-MM-dd"
        value-format="yyyy-MM-dd"
        :clearable="false"
      >
      </el-date-picker>
      <span class="rigth_10px_left_3px">季节</span>
      <el-select
        v-model="ji_jie_pullSelectvalue"
        placeholder="请选择"
        multiple
        collapse-tags
        :clearable="false"
      >
        <el-option
          v-for="item in ji_jie_pullSelectList"
          :key="item.id"
          :label="item.name"
          :value="item.name"
        >
        </el-option>
      </el-select>
      <span class="rigth_10px_left_3px">类型</span>
      <el-select
        v-model="lei_xing_pullSelectvalue"
        placeholder="请选择"
        @change="handleStypeSelectChange"
      >
        <el-option
          v-for="item in lei_xing_pullSelectList"
          :key="item.value"
          :label="item.name"
          :value="item.value"
        >
        </el-option>
      </el-select>
    </div>
    <div class="second_container">
      <!-- 查询按钮 -->
      <el-button type="primary" @click="handleQueryBtnClick">查询</el-button>
    </div>
    <div class="third_container">
      <div>
        <span class="year"
          >{{
            ji_jie_pullSelectvalue.length === 1
              ? ji_jie_pullSelectvalue[0]
              : ''
          }}装进销率(金额)</span
        >
        <span class="num">{{ topData.invoicingRateByMoney || 0 }}%</span>
      </div>
      <div>
        <span class="year"
          >{{
            ji_jie_pullSelectvalue.length === 1
              ? ji_jie_pullSelectvalue[0]
              : ''
          }}进销率(数量)</span
        >
        <span class="num">{{ topData.invoicingRateByNumber || 0 }}%</span>
      </div>
      <div>
        <span class="year"
          >{{
            ji_jie_pullSelectvalue.length === 1
              ? ji_jie_pullSelectvalue[0]
              : ''
          }}动销率(SKU)</span
        >
        <span class="num">{{ topData.movableSalesRate || 0 }}%</span>
      </div>
    </div>
    <div class="fourth_container">
      <div class="tubiao_one">
        <div class="null_data_one" v-if="jin_xiao_money.length === 0">
          暂无数据
        </div>
        <div class="null_data_two" v-if="jin_xiao_number.length === 0">
          暂无数据
        </div>
        <div id="first" class="first"></div>
        <div id="two" class="first"></div>
      </div>
      <div class="tubiao_two">
        <div class="null_data_one" v-if="movable.length === 0">暂无数据</div>
        <div class="null_data_two" v-if="discount.length === 0">暂无数据</div>
        <div id="three" class="three"></div>
        <div id="four" class="three"></div>
      </div>
    </div>
    <!--  -->
  </div>
</template>

<script>
// 基本接口
import { get_quarters_data_api } from '../../../request/page_base_api/page_base_api.js'
// 页面接口
import { query_kpi_browse_data_api } from '../../../request/store/kpi_browse_request'
//
import today from '../../../components/mixins/today.js'
import * as echarts from 'echarts'
export default {
  name: 'KpiBrowse',
  mixins: [today],
  data() {
    return {
      // 季节选中的值和数组
      ji_jie_pullSelectvalue: [],
      ji_jie_pullSelectList: [],
      // 类型选择的值和数组
      lei_xing_pullSelectvalue: '客户',
      lei_xing_pullSelectList: [
        { name: '客户', value: 1 },
        { name: '地区', value: 2 }
      ],
      // 日期
      dataPickerSelectValue: '',
      // num: 53,

      // 头部显示数据
      topData: {},
      // 下面每一个数组，代表一个表格，每一个数组里面的对象，代表一对柱子
      // 进销率（金额的）
      jin_xiao_money: [],
      // 进销率（数量）
      jin_xiao_number: [],
      // 动销率
      movable: [],
      // 折扣
      discount: [],
      // 选中客户或者地区的时候，接收的值(遍历一次，所有图表可用)
      currentArr: [],
      // 进效率柱子(金额)的数据(同,本期)
      jin_xiao_moneyList: [[], []],
      //  进效率柱子(数量)的数据(同,本期)
      jin_xiao_numberList: [[], []],
      //  动销率(同,本期)
      dong_xiao_lv_dataList: [[], []],
      // 折扣(同,本期)
      discount_dataList: [[], []]
    }
  },
  created() {
    this.get_quarters_data()
    this.dataPickerSelectValue = this.getNowTime1()
  },
  methods: {
    // 类型发生改变的时候，要改变为 '客户'
    handleStypeSelectChange(val) {
      // console.log(val)
      if (val === 1) {
        this.lei_xing_pullSelectvalue = '客户'
      }
    },
    // 查询按钮被点击
    async handleQueryBtnClick() {
      if (!this.ji_jie_pullSelectvalue.length)
        return this.$message.warning('季度不能为空')
      const paramsOBj = {
        quarters: this.ji_jie_pullSelectvalue.toString(),
        sellEndTime: this.dataPickerSelectValue
          ? this.dataPickerSelectValue + ' ' + '23:59:59'
          : '',
        type: this.lei_xing_pullSelectvalue === '客户' ? 1 : 2
      }
      // console.log('lei_xing_pullSelectvalue', this.lei_xing_pullSelectvalue)
      // console.log('paramsOBj', paramsOBj)
      const { data: res } = await query_kpi_browse_data_api(paramsOBj)
      console.log(res, '查询的数据')
      if (res.code !== 200) return
      // 成功之后
      // 遍历
      // 选中客户或者地区的时候，接收的值(遍历一次，所有图表可用)
      this.currentArr = []
      if (
        this.lei_xing_pullSelectvalue === '客户' ||
        this.lei_xing_pullSelectvalue === 1
      ) {
        res.data.money.map((item) => {
          this.currentArr.push(item.customerName)
        })
      } else {
        res.data.money.map((item) => {
          this.currentArr.push(item.area)
        })
      }

      // 下面的遍历为各个图表自己的数据
      this.topData = res.data.total
      this.jin_xiao_money = res.data.money
      // 每次遍历之前都要清空(金额的数据)
      this.jin_xiao_moneyList = [[], []]
      res.data.money.map((item) => {
        this.jin_xiao_moneyList[0].push(item.tongInvoicingRateByMoney)
        this.jin_xiao_moneyList[1].push(item.invoicingRateByMoney)
      })
      // console.log(this.jin_xiao_moneyList, 'jin_xiao_moneyList')
      console.log(this.lei_xing_pullSelectvalue, 'lei_xing_pullSelectvalue')
      console.log(this.currentArr, 'currentArr')
      this.jin_xiao_number = res.data.number
      // 每次遍历之前都要清空(数量的数据)
      this.jin_xiao_numberList = [[], []]
      res.data.number.map((item) => {
        this.jin_xiao_numberList[0].push(item.tongInvoicingRateByNumber)
        this.jin_xiao_numberList[1].push(item.invoicingRateByNumber)
      })
      this.movable = res.data.movable
      // 每次遍历之前都要清空(数量的数据)
      this.dong_xiao_lv_dataList = [[], []]
      res.data.movable.map((item) => {
        this.dong_xiao_lv_dataList[0].push(item.tongMovableSalesRate)
        this.dong_xiao_lv_dataList[1].push(item.movableSalesRate)
      })

      // #017aff 深蓝色
      // '#67afff'浅蓝色
      this.discount = res.data.discount
      // 每次遍历之前都要清空(数量的数据)
      this.discount_dataList = [[], []]
      res.data.discount.map((item) => {
        this.discount_dataList[0].push(item.tongDiscount)
        this.discount_dataList[1].push(item.discount)
      })
    },
    // 左边第一个图表
    createLeft_oneEchart() {
      let chartDom = document.getElementById('first') // 指定图表的配置项和数据
      var myChart = echarts.init(chartDom)
      let option = {
        tooltip: {
          trigger: 'axis'
        },
        // 图例
        legend: {
          //配置legend，这里的data，要对应type为‘bar’的series数据项的‘name’名称，作为图例的说明
          data: [
            '本期进销率(金额)',
            '同期进销率(金额)'
            // '同期进销率(金额)',
            // '同期平均:50%'
          ]
        },

        calculable: true,
        xAxis: [
          {
            type: 'category',
            // data: [
            //   '华东(金华)',
            //   '苏沪(玖姿)',
            //   '辽宁(玖姿)',
            //   '华东(杭州)',
            //   '西南(玖姿)',
            //   '高华憶托'
            // ],
            data: this.currentArr,
            // 去掉x轴
            axisLine: {
              show: false
            },
            // 去掉刻度线
            axisTick: {
              show: false
            },
            // 去掉网格
            splitLine: {
              show: true
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            show: true,
            // offset: 50
            axisLabel: {
              show: true,
              interval: 'auto',

              // formatter: '{value} %'
              formatter: function (val) {
                // if (val === 0 || val === 50 || val === 100) {
                return val + '%'
                // }
              }
            },
            realtimeSort: false,
            // 去掉y轴
            axisLine: {
              show: false
            },
            // 去掉刻度线
            axisTick: {
              show: false
            },
            // 去掉网格
            splitLine: {
              show: true
            }
          }
        ],
        // 关于柱子的样式，都在这里配置
        series: [
          // 一个对象代表一个柱子，这个柱子都是在这个对象配置
          // {
          //   name: '2019',
          //   type: 'bar',
          //   data: [78, 80, 87, 93],
          //   color: '#b2d7ff'
          // },
          {
            name: '本期进销率(金额)',
            type: 'bar',
            // all第一根柱子的数组
            // data: [60, 70, 60, 66, 60, 50],
            data: this.jin_xiao_moneyList[0],
            color: '#017aff',
            barCategoryGap: '30%',
            // 设置百分比
            itemStyle: {
              normal: {
                label: {
                  show: true, //开启显示
                  position: 'top', //在上方显示
                  formatter: function (val) {
                    if (val.value !== 0) {
                      return val.value + '%'
                    } else {
                      return ''
                    }
                  },
                  textStyle: {
                    //数值样式
                    color: '#1a1a1a',
                    fontSize: 12
                  }
                }
              }
            }
            // 平均线
            // markLine: {
            //   symbol: 'none', //是否显示首尾箭头
            //   // 基准线的样式
            //   label: {
            //     // //将警示值放在哪个位置，三个值“start”,"middle","end"  开始  中点 结束
            //     // position: 'end',
            //     // fontSize: 14,
            //     // formatter: '先进值'
            //   },
            //   data: [
            //     // { type: 'average', name: '平均值' },
            //     // { type: 'average', name: '平均值' }
            //     {
            //       yAxis: this.num,
            //       name: '本期平均',
            //       lineStyle: {
            //         type: 'dashed',
            //         color: '#0186FF'
            //       }
            //     },
            //     {
            //       yAxis: 30,
            //       name: '同期平均',
            //       lineStyle: {
            //         type: 'dashed',
            //         color: '#67AFFF'
            //       }
            //     }
            //   ]
            // }
          },
          {
            name: '同期进销率(金额)',
            type: 'bar',
            // 数据源(增多一组)
            // all第二根柱子的数组
            // data: [90, 77, 62, 76, 30, 20],
            data: this.jin_xiao_moneyList[1],

            color: '#67afff',
            barCategoryGap: '30%',
            // 设置百分比
            itemStyle: {
              normal: {
                label: {
                  show: true, //开启显示
                  position: 'top', //在上方显示
                  formatter: function (val) {
                    if (val.value !== 0) {
                      return val.value + '%'
                    } else {
                      return ''
                    }
                  },
                  textStyle: {
                    //数值样式
                    color: '#1a1a1a',
                    fontSize: 12
                  }
                }
              }
            }
          }
        ]
      }

      myChart.setOption(option)
    },
    // 右边第一个
    createrigth_oneEchart() {
      let chartDom = document.getElementById('two') // 指定图表的配置项和数据
      var myChart = echarts.init(chartDom)
      let option = {
        tooltip: {
          trigger: 'axis'
        },
        // 图例
        legend: {
          //配置legend，这里的data，要对应type为‘bar’的series数据项的‘name’名称，作为图例的说明
          data: [
            '本期进销率(数量)',
            '同期进销率(数量)'
            // '同期进销率(金额)',
            // '同期平均:50%'
          ]
        },

        calculable: true,
        xAxis: [
          {
            type: 'category',
            // data: [
            //   '华东(金华)',
            //   '苏沪(玖姿)',
            //   '辽宁(玖姿)',
            //   '华东(杭州)',
            //   '西南(玖姿)',
            //   '高华憶托'
            // ],
            data: this.currentArr,
            // 去掉x轴
            axisLine: {
              show: false
            },
            // 去掉刻度线
            axisTick: {
              show: false
            },
            // 去掉网格
            splitLine: {
              show: true
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            show: true,
            // offset: 50
            axisLabel: {
              show: true,
              interval: 'auto',

              // formatter: '{value} %'
              formatter: function (val) {
                // if (val === 0 || val === 50 || val === 100) {
                return val + '%'
                // }
              }
            },
            realtimeSort: false,
            // 去掉y轴
            axisLine: {
              show: false
            },
            // 去掉刻度线
            axisTick: {
              show: false
            },
            // 去掉网格
            splitLine: {
              show: true
            }
          }
        ],
        // 关于柱子的样式，都在这里配置
        series: [
          // 一个对象代表一个柱子，这个柱子都是在这个对象配置
          // {
          //   name: '2019',
          //   type: 'bar',
          //   data: [78, 80, 87, 93],
          //   color: '#b2d7ff'
          // },
          {
            name: '本期进销率(数量)',
            type: 'bar',
            // data: [60, 70, 60, 66, 60, 50],
            data: this.jin_xiao_numberList[0],
            color: '#017aff',
            barCategoryGap: '30%',
            // 设置百分比
            itemStyle: {
              normal: {
                label: {
                  show: true, //开启显示
                  position: 'top', //在上方显示
                  formatter: function (val) {
                    if (val.value !== 0) {
                      return val.value + '%'
                    } else {
                      return ''
                    }
                  },
                  textStyle: {
                    //数值样式
                    color: '#1a1a1a',
                    fontSize: 12
                  }
                }
              }
            }
            // 平均线
            // markLine: {
            //   symbol: 'none', //是否显示首尾箭头
            //   // 基准线的样式
            //   label: {
            //     // //将警示值放在哪个位置，三个值“start”,"middle","end"  开始  中点 结束
            //     // position: 'end',
            //     // fontSize: 14,
            //     // formatter: '先进值'
            //   },
            //   data: [
            //     // { type: 'average', name: '平均值' },
            //     // { type: 'average', name: '平均值' }
            //     {
            //       yAxis: this.num,
            //       name: '本期平均',
            //       lineStyle: {
            //         type: 'dashed',
            //         color: '#0186FF'
            //       }
            //     },
            //     {
            //       yAxis: 30,
            //       name: '同期平均',
            //       lineStyle: {
            //         type: 'dashed',
            //         color: '#67AFFF'
            //       }
            //     }
            //   ]
            // }
          },
          {
            name: '同期进销率(数量)',
            type: 'bar',
            // 数据源(增多一组)
            // data: [90, 77, 62, 76, 30, 20],
            data: this.jin_xiao_numberList[1],
            color: '#67afff',
            barCategoryGap: '30%',
            // 设置百分比
            itemStyle: {
              normal: {
                label: {
                  show: true, //开启显示
                  position: 'top', //在上方显示
                  formatter: function (val) {
                    if (val.value !== 0) {
                      return val.value + '%'
                    } else {
                      return ''
                    }
                  },
                  textStyle: {
                    //数值样式
                    color: '#1a1a1a',
                    fontSize: 12
                  }
                }
              }
            }
          }
        ]
      }

      myChart.setOption(option)
    },
    // 左边第二个
    createleft_twoEchart() {
      let chartDom = document.getElementById('three') // 指定图表的配置项和数据
      var myChart = echarts.init(chartDom)
      let option = {
        tooltip: {
          trigger: 'axis'
        },
        // 图例
        legend: {
          //配置legend，这里的data，要对应type为‘bar’的series数据项的‘name’名称，作为图例的说明
          data: [
            '本期动销率',
            '同期动销率'
            // '同期进销率(金额)',
            // '同期平均:50%'
          ]
        },

        calculable: true,
        xAxis: [
          {
            type: 'category',
            // data: [
            //   '华东(金华)',
            //   '苏沪(玖姿)',
            //   '辽宁(玖姿)',
            //   '华东(杭州)',
            //   '西南(玖姿)',
            //   '高华憶托'
            // ],
            data: this.currentArr,
            // 去掉x轴
            axisLine: {
              show: false
            },
            // 去掉刻度线
            axisTick: {
              show: false
            },
            // 去掉网格
            splitLine: {
              show: true
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            show: true,
            // offset: 50
            axisLabel: {
              show: true,
              interval: 'auto',

              // formatter: '{value} %'
              formatter: function (val) {
                // if (val === 0 || val === 50 || val === 100) {
                return val + '%'
                // }
              }
            },
            realtimeSort: false,
            // 去掉y轴
            axisLine: {
              show: false
            },
            // 去掉刻度线
            axisTick: {
              show: false
            },
            // 去掉网格
            splitLine: {
              show: true
            }
          }
        ],
        // 关于柱子的样式，都在这里配置
        series: [
          // 一个对象代表一个柱子，这个柱子都是在这个对象配置
          // {
          //   name: '2019',
          //   type: 'bar',
          //   data: [78, 80, 87, 93],
          //   color: '#b2d7ff'
          // },
          {
            name: '本期动销率',
            type: 'bar',
            // data: [60, 70, 60, 66, 60, 50],
            data: this.dong_xiao_lv_dataList[0],
            color: '#017aff',
            barCategoryGap: '30%',
            // 设置百分比
            itemStyle: {
              normal: {
                label: {
                  show: true, //开启显示
                  position: 'top', //在上方显示
                  formatter: function (val) {
                    if (val.value !== 0) {
                      return val.value + '%'
                    } else {
                      return ''
                    }
                  },
                  textStyle: {
                    //数值样式
                    color: '#1a1a1a',
                    fontSize: 12
                  }
                }
              }
            }
            // 平均线
            // markLine: {
            //   symbol: 'none', //是否显示首尾箭头
            //   // 基准线的样式
            //   label: {
            //     // //将警示值放在哪个位置，三个值“start”,"middle","end"  开始  中点 结束
            //     // position: 'end',
            //     // fontSize: 14,
            //     // formatter: '先进值'
            //   },
            //   data: [
            //     // { type: 'average', name: '平均值' },
            //     // { type: 'average', name: '平均值' }
            //     {
            //       yAxis: this.num,
            //       name: '本期平均',
            //       lineStyle: {
            //         type: 'dashed',
            //         color: '#0186FF'
            //       }
            //     },
            //     {
            //       yAxis: 30,
            //       name: '同期平均',
            //       lineStyle: {
            //         type: 'dashed',
            //         color: '#67AFFF'
            //       }
            //     }
            //   ]
            // }
          },
          {
            name: '同期动销率',
            type: 'bar',
            // 数据源(增多一组)
            // data: [90, 77, 62, 76, 30, 20],
            data: this.dong_xiao_lv_dataList[1],
            color: '#67afff',
            barCategoryGap: '30%',
            // 设置百分比
            itemStyle: {
              normal: {
                label: {
                  show: true, //开启显示
                  position: 'top', //在上方显示
                  formatter: function (val) {
                    if (val.value !== 0) {
                      return val.value + '%'
                    } else {
                      return ''
                    }
                  },
                  textStyle: {
                    //数值样式
                    color: '#1a1a1a',
                    fontSize: 12
                  }
                }
              }
            }
          }
        ]
      }

      myChart.setOption(option)
    },
    // 右边第二个
    createrigth_twoEchart() {
      let chartDom = document.getElementById('four') // 指定图表的配置项和数据
      var myChart = echarts.init(chartDom)
      let option = {
        tooltip: {
          trigger: 'axis'
        },
        // 图例
        legend: {
          //配置legend，这里的data，要对应type为‘bar’的series数据项的‘name’名称，作为图例的说明
          data: [
            '本期折扣',
            '同期折扣'
            // '同期进销率(金额)',
            // '同期平均:50%'
          ]
        },

        calculable: true,
        xAxis: [
          {
            type: 'category',
            // data: [
            //   '华东(金华)',
            //   '苏沪(玖姿)',
            //   '辽宁(玖姿)',
            //   '华东(杭州)',
            //   '西南(玖姿)',
            //   '高华憶托'
            // ],
            data: this.currentArr,
            // 去掉x轴
            axisLine: {
              show: false
            },
            // 去掉刻度线
            axisTick: {
              show: false
            },
            // 去掉网格
            splitLine: {
              show: true
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            show: true,
            // offset: 50
            axisLabel: {
              show: true,
              interval: 'auto',

              // formatter: '{value} %'
              formatter: function (val) {
                // if (val === 0 || val === 50 || val === 100) {
                return val + '%'
                // }
              }
            },
            realtimeSort: false,
            // 去掉y轴
            axisLine: {
              show: false
            },
            // 去掉刻度线
            axisTick: {
              show: false
            },
            // 去掉网格
            splitLine: {
              show: true
            }
          }
        ],
        // 关于柱子的样式，都在这里配置
        series: [
          // 一个对象代表一个柱子，这个柱子都是在这个对象配置
          // {
          //   name: '2019',
          //   type: 'bar',
          //   data: [78, 80, 87, 93],
          //   color: '#b2d7ff'
          // },
          {
            name: '本期折扣',
            type: 'bar',
            // data: [60, 70, 60, 66, 60, 50],
            data: this.discount_dataList[0],
            color: '#017aff',
            barCategoryGap: '30%',
            // 设置百分比
            itemStyle: {
              normal: {
                label: {
                  show: true, //开启显示
                  position: 'top', //在上方显示
                  formatter: function (val) {
                    if (val.value !== 0) {
                      return val.value + '%'
                    } else {
                      return ''
                    }
                  },
                  textStyle: {
                    //数值样式
                    color: '#1a1a1a',
                    fontSize: 12
                  }
                }
              }
            }
            // 平均线
            // markLine: {
            //   symbol: 'none', //是否显示首尾箭头
            //   // 基准线的样式
            //   label: {
            //     // //将警示值放在哪个位置，三个值“start”,"middle","end"  开始  中点 结束
            //     // position: 'end',
            //     // fontSize: 14,
            //     // formatter: '先进值'
            //   },
            //   data: [
            //     // { type: 'average', name: '平均值' },
            //     // { type: 'average', name: '平均值' }
            //     {
            //       yAxis: this.num,
            //       name: '本期平均',
            //       lineStyle: {
            //         type: 'dashed',
            //         color: '#0186FF'
            //       }
            //     },
            //     {
            //       yAxis: 30,
            //       name: '同期平均',
            //       lineStyle: {
            //         type: 'dashed',
            //         color: '#67AFFF'
            //       }
            //     }
            //   ]
            // }
          },
          {
            name: '同期折扣',
            type: 'bar',
            // 数据源(增多一组)
            // data: [90, 77, 62, 76, 30, 20],
            data: this.discount_dataList[1],

            color: '#67afff',
            barCategoryGap: '30%',
            // 设置百分比
            itemStyle: {
              normal: {
                label: {
                  show: true, //开启显示
                  position: 'top', //在上方显示
                  formatter: function (val) {
                    if (val.value !== 0) {
                      return val.value + '%'
                    } else {
                      return ''
                    }
                  },
                  textStyle: {
                    //数值样式
                    color: '#1a1a1a',
                    fontSize: 12
                  }
                }
              }
            }
          }
        ]
      }

      myChart.setOption(option)
    },
    // 获取季度的api
    async get_quarters_data() {
      const { data: res } = await get_quarters_data_api()
      console.log(res, '获取季度的数据')
      this.ji_jie_pullSelectList = res.data
    }
  },
  mounted() {
    // this.createLeft_oneEchart()
    // this.createrigth_oneEchart()
    // this.createleft_twoEchart()
    // this.createrigth_twoEchart()
    // 渲染好之后，不再更新
    // this.$nextTick(() => {
    //   this.createLeft_oneEchart()
    //   this.createrigth_oneEchart()
    //   this.createleft_twoEchart()
    //   this.createrigth_twoEchart()
    // })
  },
  updated() {
    this.$nextTick(() => {
      this.createLeft_oneEchart()
      this.createrigth_oneEchart()
      this.createleft_twoEchart()
      this.createrigth_twoEchart()
    })
  }
}
</script>

<style lang="less" scoped>
.null_data_one {
  position: absolute;
  left: 400px;
  top: 150px;
}
.null_data_two {
  position: absolute;
  left: 1250px;
  top: 150px;
}
.kpi_browse_container {
  background-color: #fff;
  padding: 10px;
}
.first_container {
  // 时间的样式
  // 时间选择器的样式
  /deep/.el-date-editor {
    width: 150px;
    height: 32px;
    .el-input__inner {
      height: 100%;
    }
    .el-input__icon {
      line-height: 33px;
    }
    // 在这个高度上，调整这个时钟icon的行高居中
    // .el-range__icon {
    //   line-height: 27px;
    // }
  }
  // 下面是一个下拉框的样式
  /deep/.el-select {
    // 宽已经生效
    width: 160px;
    height: 32px;
    .el-input--suffix {
      width: 160px;

      height: 32px;
      .el-input__inner {
        width: 160px;

        height: 32px;
      }
      .el-input__icon {
        line-height: unset;
      }
    }
  }
}
.second_container {
  margin: 16px 0;
}
.third_container {
  background-color: #f7f7f7;
  width: 100%;
  height: 112px;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  div {
    display: flex;
    flex-direction: column;
    text-align: center;
  }
  .year {
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #666666;
  }
  .num {
    font-size: 24px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    color: #222222;
  }
}
.fourth_container {
  margin-top: 25px;
  width: 100%;
  height: 100%;
  // 解决echart出现挑动，在容器加overflow：hidden
  overflow: hidden;
}
.tubiao_one {
  //
  position: relative;
  width: 100%;
  height: 310px;
  // background: pink;
  display: flex;
  justify-content: space-between;
  .first {
    width: 50%;
    height: 100%;
  }
}
.tubiao_two {
  position: relative;
  margin-top: 10px;
  width: 100%;
  height: 310px;
  // background: bisque;
  display: flex;
  justify-content: space-between;
}

// 图例样式
.aa {
  position: absolute;
  height: 20px;
  // background: pink;
  width: 500px;
  left: 10%;
  top: 0;
  display: flex;
  justify-content: space-around;
  div {
    display: flex;
    align-items: center;
    // justify-content: space-around !important;
    span {
      font-size: 12px;
    }
  }
}
// 第二个表格的图例样式
.bb {
  position: absolute;
  height: 20px;
  // background: pink;
  width: 500px;
  left: 60%;
  top: 0;
  display: flex;
  justify-content: space-around;
  div {
    display: flex;
    align-items: center;
    // justify-content: space-around !important;
    span {
      font-size: 12px;
    }
  }
}
// 第三个表格的图例样式
.cc {
  position: absolute;
  height: 20px;
  // background: pink;
  width: 500px;
  left: 10%;
  top: 0;
  display: flex;
  justify-content: space-around;
  div {
    display: flex;
    align-items: center;
    // justify-content: space-around !important;
    span {
      font-size: 12px;
    }
  }
}
// 第四个表格的图例样式
.dd {
  position: absolute;
  height: 20px;
  // background: pink;
  width: 500px;
  left: 60%;
  top: 0;
  display: flex;
  justify-content: space-around;
  div {
    display: flex;
    align-items: center;
    // justify-content: space-around !important;
    span {
      font-size: 12px;
    }
  }
}
.blue_color {
  background: #027afd;
  border-radius: 50%;
  width: 10px;
  height: 10px;
}
.blue_color_o {
  background: #67afff;
  border-radius: 50%;
  width: 10px;
  height: 10px;
}
.three {
  width: 50%;
  height: 100%;
}
.rigth_10px {
  margin-right: 10px;
}
.rigth_10px_left_3px {
  margin-right: 10px;
  margin-left: 3px;
}
</style>
